<template>
  <button 
    :class="['simple-button', type, { disabled }]"
    :disabled="disabled"
    @click="handleClick"
  >
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'SimpleButton',
  props: {
    type: {
      type: String,
      default: 'default',
      validator: value => ['default', 'primary', 'success', 'warning', 'danger'].includes(value)
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ['click'],
  methods: {
    handleClick(event) {
      if (!this.disabled) {
        this.$emit('click', event)
      }
    }
  }
}
</script>

<style scoped>
.simple-button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.simple-button:hover:not(.disabled) {
  border-color: #999;
}

.simple-button.primary {
  background: #1890ff;
  border-color: #1890ff;
  color: white;
}

.simple-button.primary:hover:not(.disabled) {
  background: #40a9ff;
  border-color: #40a9ff;
}

.simple-button.success {
  background: #52c41a;
  border-color: #52c41a;
  color: white;
}

.simple-button.success:hover:not(.disabled) {
  background: #73d13d;
  border-color: #73d13d;
}

.simple-button.warning {
  background: #faad14;
  border-color: #faad14;
  color: white;
}

.simple-button.warning:hover:not(.disabled) {
  background: #ffc53d;
  border-color: #ffc53d;
}

.simple-button.danger {
  background: #ff4d4f;
  border-color: #ff4d4f;
  color: white;
}

.simple-button.danger:hover:not(.disabled) {
  background: #ff7875;
  border-color: #ff7875;
}

.simple-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style> 